<template>
  <div class="modifyGlobalRule common-container">
    <div class="common-top">
      <span class="left">
        <span class="go-back" @click.stop="$router.go(-1)">返回</span>
      </span>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    <el-form ref="form" :model="form">
      <el-card class="box-card" style="margin-top: 10px;padding-right: 150px">
        <div slot="header" class="clearfix">
          <span>全局配置名称</span>
        </div>
        <el-input style="width: 300px;" v-model="form.name"></el-input>
      </el-card>
      <el-card style="margin-top: 10px;" class="box-card" v-for="(item, index) in groups"
               :key="index">
        <div slot="header" class="clearfix">
          <span>{{ item.fieldName }}</span>
        </div>
        <el-form-item
          v-for="(fItem, fIndex) in item.fieldsList"
          :key="fIndex"
          required
          :label="fItem.detail">
          <el-input style="width: 300px;" v-if="fItem.onOff" v-model="fItem.def.value">
            <template slot="prepend">
              是否开启：
              <el-switch v-model="fItem.def.enable"></el-switch>
            </template>
          </el-input>
          <template v-else>
            <el-switch v-if="fItem.type === 'boolean'" v-model="fItem.def"></el-switch>
            <el-input style="width: 300px;" v-else-if="fItem.type === 'int'" v-model="fItem.def"
                      type="number"></el-input>
            <el-input style="width: 300px;" v-else v-model="fItem.def"></el-input>
          </template>
        </el-form-item>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import Api from "@/api/";

export default {
  name: "ModifyGlobalRule",
  data() {
    return {
      disciplineOptions: [],
      groups: [],
      form: {
        formId: 0,
        name: "",
        enable: true,
      },
    };
  },
  methods: {
    getInfo() {
      Api.globalRule.detail({
        targetId: this.$route.query.id,
      }).then((res) => {
        this.form = {
          formId: res.data.id,
          name: res.data.name,
          enable: res.data.enable,
        };
        for (let i = 0; i < this.groups.length; i++) {
          for (let j = 0; j < this.groups[i].fieldsList.length; j++) {
            let ele = this.groups[i].fieldsList[j];
            if (ele.type == 'array' || ele.type == 'object') {
              this.groups[i].fieldsList[j].def = JSON.stringify(res.data.setting[ele.key]);
            } else {
              this.groups[i].fieldsList[j].def = res.data.setting[ele.key];
            }
          }
        }
      });
    },
    checkInfo() {
      if (String(this.form.name).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写名称",
        });
        return false;
      }
      return true;
    },
    save() {
      if (!this.checkInfo()) {
        return;
      }
      let form = JSON.parse(JSON.stringify(this.form));
      form.setting = {};
      for (let i = 0; i < this.groups.length; i++) {
        for (let j = 0; j < this.groups[i].fieldsList.length; j++) {
          let ele = this.groups[i].fieldsList[j];
          if (ele.type == 'array' || ele.type == 'object') {
            form.setting[ele.key] = JSON.parse(ele.def);
          } else {
            form.setting[ele.key] = ele.def;
          }
        }
      }
      Api.globalRule.edit(form).then((res) => {
        if (res.code == 200) {
          this.$router.go(-1);
        }
      })
        .catch((err) => {
        });
    },
    getFileds() {
      return new Promise((resolve, reject) => {
        Api.globalRule.fieldsList({})
          .then((res) => {
            let settingObj = {};
            res.data.forEach((item) => {
              settingObj[item.group] = {
                fieldName: item.group,
                fieldsList: [],
              };
            });
            for (let k in settingObj) {
              res.data.forEach((item) => {
                if (item.group == k) {
                  if (item.onOff) {
                    item.def = {
                      enable: true,
                      value: "",
                    };
                  }
                  settingObj[k].fieldsList.push(item);
                }
              });
            }
            let groups = [];
            for (let k in settingObj) {
              groups.push(settingObj[k]);
            }
            this.groups = groups;
            resolve();
          })
          .catch((err) => {
            reject();
          });
      });
    },
  },
  async mounted() {
    await this.getFileds();
    if (this.$route.query.type == "edit") {
      this.getInfo();
    }
  },
};
</script>
<style scoped lang="scss">
.modifyGlobalRule {
  .modify-bot {
    width: 70%;
    padding: 30px 10px;
  }
}
</style>
